import React from "react";
import { useState } from "react";
import{IconThumbUp,IconMessage,IconGift,IconTrophy,IconCalendar,IconThunderbolt} from "@arco-design/web-react/icon"
import "./rightBar.css"
import * as PublicCom from "../publicComponents/index"
export function RightBar(){
    const [nowCate,setCate]=useState(0)
    function changeCate(cate){
        setCate(cate)
    }
    //MOCK评论数据
    let messageMOCK=[{
        messageID:"mainID",//messageID
        to:"asdasda1",//MessageID
        fromUser:"ABC",//fromUseName
        toUser:"EFG",//toUseName
        messageTime:'2023年9月23日',
        messageContent:'按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算按实际打卡时间了打卡结束来得及爱上了看得见埃里克森简单啦开始解答拉克丝简单啦可接受地拉克丝建档立卡就收到啦库计算',
        children:[]
    }]
    const tags=[
        "Java",
        "Linux",
        "数据库",
        "源码",
        "Shiro",
        "框架",
        "JDK",
        "动态代理",
        "Apache",
        "PHP",
        "MySQL",
        "生活",
        "随笔",
        "博客",
        "RocketMQ",
        "Jenkins",
        "Maven",
        "Nginx",
        "Servlet",
        "JavaWeb",
        "Spring",
        "MongoDB",
        "Discuz",
        "Cglib",
        "SVN",
        "Class",
        "ClassLoader",
        "SpringBoot",
        "设计模式",
        "单例模式"
    ]
    const colorList=['rgb(218, 153, 255)','rgb(174, 220, 174)','rgb(236, 169, 167)','rgb(217, 185, 153)','rgb(255, 179, 128)','rgb(66, 139, 202)']
    return (
        <div className="rightBarContainer">
            <div className="optionsButton">
                <div className="rightCategrate" onClick={()=>{changeCate(0)}}>
                    <IconThumbUp />
                </div>
                <div className="rightCategrate" style={{width:'34%'}}  onClick={()=>{changeCate(1)}}>
                    <IconMessage />
                </div>
                <div className="rightCategrate"  onClick={()=>{changeCate(2)}}>
                    <IconGift />
                </div>
                <div className="areaBar" style={{left:`${['15px','100px','185px'][nowCate]}`}}></div>
            </div>
            <div style={{width:'100%'}}>
                {nowCate==0?
                <div className="rightList">
                    <div style={{textAlign:'left',marginLeft:'10px',marginTop:'10px',color:'var(--colorText-1)',marginBottom:'10px',fontSize:'16px'}}>热门文章</div>
                    <PublicCom.RightArticle allowReply={false}></PublicCom.RightArticle>
                </div>:null}
                {nowCate==1?
                <div className="rightList">
                    <div style={{textAlign:'left',marginLeft:'10px',marginTop:'10px',color:'var(--colorText-1)',marginBottom:'10px',fontSize:'16px'}}>最新评论</div>
                    {messageMOCK.map(message=>{return <PublicCom.Message allowReply={false} messageData={message}></PublicCom.Message>})}
                </div>:null}
                {nowCate==2?<div  className="rightList">
                    <div style={{textAlign:'left',marginLeft:'10px',marginTop:'10px',color:'var(--colorText-1)',marginBottom:'10px',fontSize:'16px'}}>随机文章</div>
                    <PublicCom.RightArticle allowReply={false}></PublicCom.RightArticle>
                </div>:null}
            </div>
            <div className="rightTitle" style={{textAlign:'left',marginLeft:'10px',color:'var(--colorText-1)',padding:'10px',fontSize:'16px',marginTop:'16px'}}>博客信息</div>
            <div className="blogInfo">
                <div className="blogInfoItem">
                    <IconTrophy style={{lineHeight:'50px',marginTop:'15px',marginLeft:'16px',fontSize:'18px',color:"var(--colorText-2)"}}/>
                    <div className="blogInfoText">文章数目</div>
                    <div className="blogExtra" style={{backgroundColor:'rgb(217, 185, 153)',color:'white'}}>63</div>
                </div>
                <div className="blogInfoItem">
                    <IconMessage  style={{lineHeight:'50px',marginTop:'15px',marginLeft:'16px',fontSize:'18px',color:"var(--colorText-2)"}}/>
                    <div className="blogInfoText">评论数目</div>
                    <div className="blogExtra" style={{backgroundColor:'rgb(66, 139, 202)',color:'white'}}>305</div>
                </div>
                <div className="blogInfoItem">
                    <IconCalendar  style={{lineHeight:'50px',marginTop:'15px',marginLeft:'16px',fontSize:'18px',color:"var(--colorText-2)"}}/>
                    <div className="blogInfoText">运行天数</div>
                    <div className="blogExtra" style={{backgroundColor:'rgb(66, 139, 202)',color:'white'}}>0年0天0月</div>
                </div>
                <div className="blogInfoItem">
                    <IconThunderbolt  style={{lineHeight:'50px',marginTop:'15px',marginLeft:'16px',fontSize:'18px',color:"var(--colorText-2)"}}/>
                    <div className="blogInfoText">最后活动</div>
                    <div className="blogExtra" style={{backgroundColor:'rgb(218, 153, 255)',color:'white'}}>1天前</div>
                </div>
            </div>
            <div className="rightTitle" style={{marginTop:'16px'}}>标签云</div>
            <div className="tagContainer">
                {
                    tags.map((tag,index)=>{
                        return <div className="tagItem" style={{backgroundColor:colorList[index%6]}}>
                                {tag}
                            </div>
                    })
                }
                
            </div>
        </div>
    )
}